<template>
    <div class='post-manager full' :rows='"*, 68px"'>
		<div class="search-box">
			<el-form :model="searchInfo" :inline="true">
				<el-form-item style="width: 30%">
					<el-input v-model="searchInfo.title" placeholder="文章标题"></el-input>
				</el-form-item>
				<el-button type="primary" @click="search" round>查询</el-button>
			</el-form>
		</div>
		<div class="table-box">
			<el-table v-loading="loading" height='100%' :data='articles' size="medium" @row-click="editArticle" highlight-current-row>
				<el-table-column type='index' width='60' align='center'></el-table-column>
				<el-table-column label='文章标题' min-width='200' align='left' show-overflow-tooltip>
					<template slot-scope="scope">
						<div style="display: flex; align-items: center">
							<so-tag :name="scope.row.tags.split(',')[0]"></so-tag>
							<span class="cn-font">{{scope.row.title}}</span>
						</div>
					</template>x
				</el-table-column>
				<el-table-column label='最近编辑' prop='updateTime' :formatter="formatDate" width='120' align='center' class-name="num-font"></el-table-column>
				<el-table-column label='发布时间' prop='createTime' :formatter="formatDate" width='120' align='center' class-name="num-font"></el-table-column>
				<el-table-column label='阅读总量' prop='readCount' width='120' align='right' class-name="num-font"></el-table-column>
				<el-table-column label="操作" width='200' align='right'>
					<template slot-scope="scope">
						<el-button @click.stop="deleteArticle(scope.row)" type="text" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="pagination-box">
			<pagination :page='page' @pageChange="pageChange"></pagination>
		</div>
    </div>
</template>

<script>
import Pagination from '../../../../components/layout/Pagination';
import SoTag from '../../../../components/base/SoTag';
import DateUtil from '../../../../../utils/date';
import { getArticle, deleteArticle } from '../../../../service/postService';

export default {
	components: {
		SoTag,
		Pagination
	},
	data () {
		return {
			searchInfo: {
				title: ''
			},
			articles: [],
			loading: false,
			page: {
				total: 0,
				size: 30,   
				current: 1 
			}
		};
	},
	mounted () {
		this.request();
	},
	methods: {
		editArticle (row) {
			window.open('#/sys/post/' + row.title + '=' + row.id);
		},
		deleteArticle (row) {
			let self = this;
			let params = {
				id: row.id
			};
			deleteArticle(params).then(data => {
				self.$message('删除成功');
				self.request();
			});
		},
		search () {
			let self = this;
			let params = {
				title: self.searchInfo.title
			};
			self.loading = true;
			getArticle(params).then(data => {
				self.articles = data.resultList.slice(0);
				self.page.total = data.total;
				self.loading = false;
			}).catch(e => {
				self.loading = false;
			});
		},
		request () {
			let self = this;
			let params = {
				title: '',
				content: '',
				size: self.page.size,
				start: self.page.current - 1
			};
			self.loading = true;
			getArticle(params).then(data => {
				self.articles = data.resultList.slice(0);
				self.page.total = data.total;
				self.loading = false;
			}).catch(e => {
				self.loading = false;
			});
		},
		pageChange (current) {
			this.page.current = current;
			this.request();
		},
		formatDate (row, column, cellValue, index) {
			return DateUtil.formatDateSlim(cellValue);
		}
	}
};
</script>

<style lang="scss" scoped>
	.post-manager {
		position: relative;
		.search-box {
			height: 80px;
			background: #edecff;
			padding: 20px 80px;
		}

		.table-box {
			height: calc(100% - 80px - 70px);
			margin: 0 80px;
		}

		.pagination-box {
			height: 70px;
		}
	}
</style>
